<template>
  <DialogSubmitForm v-bind="formFrame" ref="form" />
</template>
<script setup lang="ts">
import { MDialogSubmitForm as DialogSubmitForm } from "page-com";
import { shallowReactive, useTemplateRef, ref, inject } from "vue";
import { register } from "@/api/user/userApi";
import { DialogSubmitFormFrame, DialogSubmitFormInstance } from "page-com";
import { successMsg } from "@/utils/message";
import { UploadRequestOptions } from "element-plus";
import { http } from "@/utils/http";
import { uploadFun } from "@/utils/utils";
const form = useTemplateRef<DialogSubmitFormInstance>("form");
const roleOptions: SelectVo[] = inject<() => SelectVo[]>("roleOptions")();
const formFrame = shallowReactive<DialogSubmitFormFrame>({
  submitFun: async function (data) {
    data.roleIds = data.roleIds.join(",");
    let res = await register(data);
    if (res.code == RESPONSE_CODE.SUCCESS) {
      successMsg("添加成功");
      emit("saveSuccess", data);
      form.value.hide();
    }
  },
  width: "400px",
  items: [
    {
      frameType: "input",
      label: "用户名",
      key: "userName",
      validations: {
        required: true
      }
    },
    {
      frameType: "input",
      label: "昵称",
      key: "nickName"
    },
    {
      frameType: "input",
      label: "密码",
      key: "password"
    },
    {
      frameType: "multiSelect",
      key: "roleIds",
      label: "角色",
      options: roleOptions
    },
    {
      label: "头像",
      frameType: "singleUpload",
      key: "headImg",
      tips: "最大360px X 360px",
      uploadUrl: "/user/uploadFile",
      uploadFun: uploadFun
    }
  ]
});
function show() {
  form.value.show();
}

defineExpose({ show });
const emit = defineEmits<{
  saveSuccess: [data: ShopUserVo];
}>();
</script>
